<template>
  <view>
    <!--    商品列表-->
    <emptyPage v-if="goodsList.length==0" title="请选择商品"></emptyPage>
    <view class="goods-list p-20" >
      <view class="item card-bg mb-32" v-for="(item,index) in goodsList" :key="index">
        <!--商品-->
        <view class="goods">
          <image class="l" mode="aspectFill" :src="item.image"></image>
          <view class="c line1">
            {{item.store_name}}
          </view>
          <view class="r">
            <view class="btn-default" @click="deleteGoods(index)">删除</view>
          </view>
        </view>
      </view>
    </view>

    <view class="footer">
      <view class="btn-default" @click="openAddPop">
        选择商品
      </view>
      <view class="btn-default btn-blue" @click="saveGoods">
        保存
      </view>
    </view>
    <uni-popup ref="addPop" type="center" border-radius="10px 10px 0 0">
      <view class="addPop">
        <view>
          <uni-collapse @change="changeColl">
            <uni-collapse-item name="key1" title="点击选择分类" :show-animation="true" :open="collShow">
              <checkbox-group @change="checkboxChange($event)" v-if="categoryList.length" >
                <view class="cate-list acea-row">
                  <view class="item">
                    <view class="tips">一级分类</view>
                    <scroll-view scroll-y="true" class="scroll-Y">
                      <view class="itemn line1" :class="{checked: index == currentOne,on:cateIds.includes(item.id)}" v-for="(item,index) in categoryList" :key="item.id" @click="categoryTap(index)">
                        <!-- #ifndef MP -->
                        <checkbox :value="item.id" :checked='cateIds.includes(item.id)' style="transform:scale(0.9)" />
                        <!-- #endif -->
                        <!-- #ifdef MP -->
                        <checkbox :value="item.id" :checked='cateIds.includes(item.id)' style="transform:scale(0.9)" />
                        <!-- #endif -->
                        {{item.cate_name}}
                      </view>
                    </scroll-view>
                  </view>
                  <view class="item on" :class="!categoryList[currentOne].children.length?'on3':''" v-if="categoryList[currentOne]">
                    <view class="tips">二级分类</view>
                    <scroll-view scroll-y="true" class="scroll-Y" :key="currentOne + '_scroll'">
                      <view class="itemn line1" :class="{checked: jIndex == currentTwo,on:cateIds.includes(j.id)}" v-for="(j,jIndex) in categoryList[currentOne].children" :key="j.id" @click="categoryTwoTap(jIndex)">
                        <!-- #ifndef MP -->
                        <checkbox :value="j.id" :checked='cateIds.includes(j.id)' style="transform:scale(0.9)" />
                        <!-- #endif -->
                        <!-- #ifdef MP -->
                        <checkbox  :value="j.id" :checked='cateIds.includes(j.id)' style="transform:scale(0.9)" />
                        <!-- #endif -->
                        {{j.cate_name}}
                      </view>
                    </scroll-view>
                  </view>
                  <view class="item on2" v-if="categoryList[currentOne] && categoryList[currentOne].children.length">
                    <view class="tips">三级分类</view>
                    <scroll-view scroll-y="true" class="scroll-Y">
                      <view class="itemn line1" :class="{on:cateIds.includes(x.id)}" v-for="(x,xIndex) in categoryList[currentOne].children[currentTwo].children" :key="x.id">
                        <!-- #ifndef MP -->
                        <checkbox :value="x.id" :checked='cateIds.includes(x.id)' style="transform:scale(0.9)" />
                        <!-- #endif -->
                        <!-- #ifdef MP -->
                        <checkbox :value="x.id" :checked='cateIds.includes(x.id)' style="transform:scale(0.9)" />
                        <!-- #endif -->
                        {{x.cate_name}}{{x.id}}
                      </view>
                    </scroll-view>
                  </view>
                </view>
              </checkbox-group>
              <view class="cate-btn">
                <view class="btn-default btn-blue" @click="search">
                  搜索
                </view>
              </view>
            </uni-collapse-item>
          </uni-collapse>
        </view>

        <!--搜索商品-->
        <emptyPage v-if="searchList.length==0" :title="cateIds.length==0?'请选择分类搜索商品':'暂无商品，重新搜索或提交申请补充商品'"></emptyPage>
        <view v-if="cateIds.length>0 && searchList.length==0" class="flex justify-center">
          <view @click="applyAddGoods" class="btn-default btn-blue">申请补充商品</view>
        </view>
        <view class="list p-20" >
          <checkbox-group @change="checkboxGoods">
            <view class="item card-bg mb-32" v-for="(item,index) in searchList" :key="index">
              <!--商品-->
              <view class="goods">
                <image class="l" mode="aspectFill" :src="item.image"></image>
                <view class="c line1">
                  {{item.store_name}}
                </view>
                <view class="r line1">
                  <checkbox class="checkbox" :value="item.id" :checked="item.checked" :disabled="checkDisabled(item)"/>
                </view>
              </view>
            </view>
          </checkbox-group>
        </view>

        <view class="btn-box">
          <view class="btn-default mr-20" @click="closeAddPop">
            关 闭
          </view>
          <view class="btn-default btn-blue" @click="addGoods">
            确 认
          </view>
        </view>
      </view>
    </uni-popup>


  </view>
</template>

<script>

import {addStoreProduct, applyAddGoods, getCategory, getPlatformProductList, userInfo} from "@/api/admin";
import emptyPage from "@/components/emptyPage.vue";

export default {
  components: {emptyPage},
  data() {
    return {
      storeId:'',
      // start 分类相关
      categoryList:[],
      currentOne:0,
      currentTwo:0,
      cateIds:[],
      collShow:true,
      // end 分类相关

      // 选择商品
      searchForm:{
        page:1,
        limit:1000,
      },
      searchList:[],
      // todo
      goodsList:[]
    }
  },
  onLoad() {
    this.getInfo()
    this.category()
    setTimeout(()=>{
      this.openAddPop()
    },500)
  },
  methods: {
    getInfo(){
      userInfo().then(res=>{
        if(res.status===200){
          this.storeId=res.data.store_id
        }
      })
    },
    // start 分类相关
    category(){
      getCategory().then(res=>{
        this.categoryList = res.data;
      })
    },
    categoryTap(index){
      this.currentOne = index
      this.currentTwo = 0
    },
    categoryTwoTap(index){
      this.currentTwo = index
    },
    checkboxChange(e, index, item){
      this.cateIds = [...e.detail.value];
    },
    // 已选择的禁用
    checkDisabled(item){
      return this.goodsList.some(good => good.id === item.id);
    },
    changeColl(e){
      if(e.length>0){
        this.collShow=true
      }
    },

    search(){
      // 关闭手风琴
      this.collShow=false
      this.getPlatformProductList()
    },
    openAddPop() {
      this.$refs.addPop.open()
    },
    closeAddPop(){
      this.$refs.addPop.close()
    },

    // 搜索商品：标记选择
    checkboxGoods(event){
      let idList = event.detail.value;
      this.searchList.forEach((item) => {
        if (idList.indexOf(item.id) !== -1) {
          item.checked = true;
        } else {
          item.checked = false;
        }
      })
    },
    // 搜索商品：确认
    addGoods(){
      this.searchList.forEach(item=>{
        if(item.checked){
          let exists = this.goodsList.some(good=>{
            return good.id==item.id
          })
          if(!exists){
            this.goodsList.unshift(item)
          }
        }
      })
      console.log('this.goodsList',this.goodsList)
      this.closeAddPop()
      this.searchList.forEach(item=>{
        item.checked = false;
      })
    },
    // 搜索商品：列表
    getPlatformProductList(){
      if(this.cateIds.length==0){
        return this.$util.Tips({
          title:'请选择分类'
        })
      }
      getPlatformProductList({
        ...this.searchForm,
        store_id:this.storeId,
        cate_id: this.cateIds.join(',')
      }).then(res=>{
        if(res.status==200){
          this.searchList = res.data.list;
          // 统计当前选择的商品
          this.goodsList.forEach(item=>{
            this.searchList.forEach(search=>{
              if(item.id==search.id){
                search.checked=true
              }
            })
          })
        }
      })
    },

    // 添加列表：删除
    deleteGoods(index){
      this.goodsList.splice(index,1)
    },

    // 保存商品
    saveGoods(){
      let goodsIds=[]
      this.goodsList.forEach(item=>{
        goodsIds.push(item.id)
      })

      addStoreProduct({
        store_id:this.storeId,
        product_id:goodsIds.join(',')
      }).then(res=>{
        if(res.status===200){
          this.$util.Tips({
            title:'保存成功'
          })
          uni.redirectTo({
            url:'/pages/admin/goods/index'
          })
        }
      })
    },

    // 申请补充
    applyAddGoods(){
      applyAddGoods({
        store_id:this.storeId,
        cate_id:this.cateIds.join(',')
      }).then(res=>{
        if(res.status===200){
          this.$util.Tips({
            title:'申请成功，平台将尽快处理'
          })
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.footer{
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  .btn-default{
    width: 200rpx;
    height: 66rpx;
    font-size: 28rpx;
  }
}
.addPop{
  background: #fff;
  width: 94vw;
  height: 80vh;
  border-radius: 20rpx;
  padding: 10rpx;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  .cate-list{
    height: 500rpx;
    .scroll-Y{
      height: 500rpx;
    }
    .item{
      width: 33.33%;
      padding-left: 32rpx;
      font-size: 26rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #666666;
      padding-top: 30rpx;

      .tips{
        color: #999;
        font-size: 24rpx;
        margin-bottom: 30rpx;
      }

      .itemn{
        margin-bottom: 58rpx;

        &.checked{
          color: #000;
          font-weight: bold;
        }

        &.on{
          color: #2A7EFB;
        }
      }

      &.on{
        background-color: #FAFAFA;
      }
      &.on2{
        background-color: #F5F5F5;
      }
      &.on3{
        width: 66.66%;
      }
    }
  }
  .cate-btn{
    display: flex;
    justify-content: flex-end;
    padding:20rpx 0;
  }
  .list{
    flex: 1;
    overflow-y: auto;
    .item{
      border-radius: 20rpx;
      overflow: hidden;
      padding: 20rpx;
      background: #fff;
      .goods{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .l{
          flex: 0 0 120rpx;
          width: 120rpx;
          height: 120rpx;
          margin-right: 20rpx;
        }
        .c{
          height: 120rpx;
          flex: 1;
        }
        .r{
          padding-left: 30rpx;
        }
      }
    }
  }
  .btn-box{
    display: flex;
    justify-content: center;
    padding: 20rpx 0;
  }
}
.goods-list{
  .item{
    border-radius: 20rpx;
    overflow: hidden;
    padding: 20rpx;
    background: #fff;
    .goods{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .l{
        flex: 0 0 120rpx;
        width: 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
      }
      .c{
        height: 120rpx;
        flex: 1;
      }
    }
  }
}
</style>